<script setup lang="ts">
import { useConnect, useChainId } from "@wagmi/vue";

const chainId = useChainId();
const { connectors, connect } = useConnect();
let walletconnector = connectors[1];
console.log(`output->connectors`, connectors);
console.log(`output->walletconnector`, walletconnector);
</script>

<template>
  <div class="container">
    <div class="buttons">
      <button
        v-for="connector in connectors"
        :key="connector.id"
        @click="connect({ connector, chainId })"
      >
        {{ connector.name }}
      </button>
      <!-- <button
        className="button"
        @click="connect({ connector: walletconnector, chainId })"
        type="button"
      >
        {{ walletconnector.name }}
      </button> -->
    </div>
  </div>
</template>
